<template>
  <section class="remark">
    <nav-bar>
      <div class="center" slot="center">订单备注</div>
    </nav-bar>
    <div class="quick-notes">
      <p class="title">快速备注</p>
      <ul>
        <li v-for="(item, index) in remarks" :key="index">
          <span
            v-for="(iten, indey) in item"
            :key="indey"
            :style="{
              borderLeft: indey >= 1 ? 0 : '1px solid #6bafee',
              borderTopLeftRadius: indey === 0 ? '5px' : '0',
              borderBottomLeftRadius: indey === 0 ? '5px' : '0',
              borderTopRightRadius: indey === item.length - 1 ? '5px' : '0',
              borderBottomRightRadius: indey === item.length - 1 ? '5px' : '0',
            }"
            :class="{ select: JSON.stringify(selectTag).includes(iten) }"
            @click="handleSelectTag(iten, index)"
            >{{ iten }}</span
          >
        </li>
      </ul>
    </div>
    <div class="other-remarks">
      <p class="title">其他备注</p>
      <textarea class="area" placeholder="请输入备注内容(可不填)" v-model="otherRemarks"></textarea>
    </div>
    <input type="button" value="确定" @click="handleSkipConfirmOrder" />
  </section>
</template>

<script>
import NavBar from "components/common/navbar/NavBar";
export default {
  name: 'Remark',
  data() {
    return {
      selectTag: [],
      otherRemarks: ''
    };
  },
  props: {
    remarks: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  created() {
    this.$bus.$emit("obtainRemark");
  },
  methods: {
    // 所有选中的标签都会放在selectTag数组内
    handleSelectTag(iten, index) {
      if (Object.values(this.selectTag).length) {
        for (let i = 0; i < this.selectTag.length; i++) {
          this.selectTag[i].sequence === index
            ? (this.selectTag[i].text = iten)
            : JSON.stringify(this.selectTag).includes(index)
            ? ""
            : this.selectTag.push({ sequence: index, text: iten });
        }
      } else {
        this.selectTag.push({ sequence: index, text: iten });
      }
    },

    handleSkipConfirmOrder() {
      this.$emit('handleSkipOrder', this.selectTag,this.otherRemarks)
      this.$router.back()
    }
  },
  components: {
    NavBar,
  },
};
</script>
<style lang="less" scoped>
@import url("assets/css/mixin");
.remark {
  background-color: #f5f5f5;
  .initial-children();
  .quick-notes,
  .other-remarks {
    padding: 0 10px;
    background-color: #fff;
    color: #333333;
    .title {
      padding: 15px 0;
    }
  }
  .quick-notes {
    margin: 10px 0;
    ul {
      display: flex;
      flex-wrap: wrap;
      padding-bottom: 20px;
      font-size: 12px;
      li {
        margin: 5px;
        span {
          display: inline-block;
          padding: 10px 20px;
          border: 1px solid #6bafee;
        }
        .select {
          background-color: #3190e8;
          color: #fff;
        }
      }
    }
  }
  .other-remarks {
    .area {
      width: 100%;
      height: 100px;
      padding: 10px;
      border-radius: 5px;
      margin-bottom: 30px;
      background-color: #f9f9f9;
      font-size: 12px;
    }
  }
  input[type="button"] {
     .determine();
     margin: 0 auto;
  }
}
</style>